<template>
  <div class="login-page">
    <el-row>
      <el-col :xs="{span: 22,offset: 1}" :sm="{span: 6,offset: 9}">
        <span class="title">
          欢迎登录
        </span>
        <el-row>
          <el-input
            v-model="account"
            placeholder="请输入账号"
            type="text">
          </el-input>
          <el-input
            v-model="password"
            placeholder="请输入密码"
            type="password">
          </el-input>
          <el-button class="login-btn" type="primary" @click="loginToDo">登录</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    loginToDo () {
      let obj = {
        name: this.account,
        password: this.password
      }
      this.$ajax.post('/auth/user', obj)
        .then((res) => {
          if (res.data.success) {
            sessionStorage.setItem('todolist-token', res.data.token)
            this.$message({
              type: 'success',
              message: '登录成功'
            })
            this.$router.push('/todolist')
          } else {
            this.$message.error(res.data.info)
            sessionStorage.setItem('todolist-token', null)
          }
        }, () => {
          this.$message.error('请求错误！')
          sessionStorage.setItem('todolist-token', null)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  .login-page{
    .title{
      display: block;
      margin: 10px;
    }
    .el-input{
      margin:10px 0;
    }
    .login-btn{
      width: 100%;
    }
  }
</style>
